<template>
  <div class="menu">
    <el-menu
        router
        unique-opened
        :collapse="isCollspace"
        collapse-transition
        :default-active="$route.path"
        class="el-menu-vertical-demo">
<!--        @open="handleOpen"-->
<!--        @close="handleClose">-->
      <template v-for="item in menu">
        <el-submenu v-if="item.children.length>0" :index="item.path" :key="item.name">
          <template slot="title">
            <i class="icon-menu">
              <img :src="item.icon" width="100%"/>
            </i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item v-for="v in item.children" :index="v.path" :key="v.name">
            <i class="icon-menu">
              <img :src="v.icon"/>
            </i>
            <span slot="title">{{v.name}}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="item.path" :key="item.name">
          <i class="icon-menu">
            <img :src="item.icon"/>
          </i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default{
  data(){
    return{

    }
  },
  computed:{
    ...mapGetters(["menu",'isCollspace'])
  },
  mounted() {
    console.log(this.menu)
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-header{
  background: white;
}
::v-deep .el-menu{
  background: transparent;
  border:0;
}
::v-deep .el-menu-item{
  background: transparent;
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px 0;
  min-width:20px;
  color: #fff;
}
::v-deep .el-submenu__title{
  background: transparent;
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px 0;
  color: #fff;
}
.el-menu-item:focus, .el-menu-item:hover{
  background: rgba(255,255,255,.3);
  border-radius: 20px !important;
}
 ::v-deep .el-submenu__title:hover{
   background: rgba(255,255,255,.3);
   border-radius: 20px !important;
 }
.el-menu-item.is-active{
  color: hotpink;
}
.icon-menu{
  width: 25px;
  display: inline-block;
  >img{
    width: 100%;
  }
}
</style>